﻿@model FTBS.Models.Entities.Film
@using FTBS.Models.Entities
@{
    ViewBag.Title = "Thông tin chi tiết";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var comments = (List<Comment>)ViewBag.Comments;
    var schedule = (List<Schedule>)ViewBag.Schedule;
    var sameCateFilm = (List<Film>)ViewBag.SameCate;
    string minutes = "";
    string hours = "";
    var currentHour = DateTime.Now.Hour;
    var currentDay = DateTime.Now;
}

<style>
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        right:0;
                z-index: 10;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    .modal {
        background-color: rgba(248, 248, 248, 1);
        border-radius: 5px;
        z-index: 11;
        position: fixed;
        left: 27%;
        top: 20%;
        width: 40%;
        padding: 0px;
    }

    .buttonx {
        height: 20px;
        width: 20px;
        color: floralwhite;
        cursor: pointer;
        margin: 3px;
    }
    
        .description {
        display: -webkit-box;
        max-width: 100%;
        margin: 0 auto;
        font-size: 12px;
        line-height: 1px;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .filmkind {
        padding: 5px; 
        font-size: 27px; 
        background-color: rgb(83, 141, 160); 
        color: white;
    }
    .filminfo {
    width: 100%; 
    padding-left: 20px;
    border-bottom: #ddd 1px solid;
    padding-bottom: 5px;
    border-top: solid 1px #fff;
    }
    .filmpart {
    display: inline-block; 
    vertical-align: top;
    }
    .filmtitle {
    font-size: 21px; 
    color: red;
    }
    .showtime {
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E46B54), to(#251613));
        width: 49px;
        text-align: center;
        border-radius: 3px;
        margin: 2px 2px 2px 25px;
        display: inline-block;

    }
      .showtime_dis {
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4B4B4), to(#251613));
        width: 49px;
        text-align: center;
        border-radius: 3px;
        margin: 2px 2px 2px 25px;
        display: inline-block;
        color:white;
    }
</style>
<div class="panel" style="display: table-cell;  background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%">
    <div class="container">
        <!--THONG TIN PHIM-->
        <div style="display: inline-block; padding-top: 30px; padding-left: 10px; width: 70%">
            <div style="border-bottom: solid 1px #ddd">
                <div style="font-size: 30px; font-weight: 100; padding-left: 30px; color: rgb(241, 72, 72); line-height: 30px; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px">@Model.Name</div>
                <div style="display: inline-block; width: 30%">
                    <img src="~/Image/FilmImage/@Model.ImageURL" style="height:320px;width:100%;border: 2px solid black;" />
                
                </div>
                <div style="display: inline-block; padding: 0px 0px 0px 10px; vertical-align: top; width: 69%">
                    @Model.Description
                    <div id="filmInfo">
                        <div>
                            <table style="margin-top: 10px" class="table striped bordered hovered">
                                <tr>
                                    <td>Diễn viên:</td>
                                    <td>
                                        <div>@Model.Actor</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Đạo diễn:</td>
                                    <td>
                                        <div>@Model.Director</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Thể loại: </td>
                                    <td>
                                        <div>@Model.Category.CategoryName</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Quốc gia: </td>
                                    <td>
                                        <div>@Model.Nation</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Độ dài phim:</td>
                                    <td>
                                        <div>@Model.Length phút</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Định dạng:</td>
                                    <td>
                                        <div>@Model.Format.FormatName</div>
                                    </td>
                                </tr>
                                <tr>
                                     <td>IMDb:</td>
                                    <td>
                                        <div>@Model.IMDb</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                        <div id="buttons" style="float:left">
                        <button style="margin:5px;display:inline;background-color:rgb(62, 165, 240);color:white;border-radius: 3px;box-shadow: 8px 4px 2px rgb(195, 224, 255);" onclick ="Trailer('@Model.TrailerURL','@Model.Name')">Xem Trailer</button>
                        @if (schedule.Count() == 0)
                        {   
                            <button style="margin:5px;display:inline;background-color:rgb(62, 165, 240);color:white;border-radius: 3px;box-shadow: 8px 4px 2px rgb(195, 224, 255);" disabled>Chưa bán vé</button>}
                        else
                        {   
                            <button style="margin:5px;display:inline;background-color: rgb(240, 83, 62);color:white;border-radius: 3px;box-shadow: 8px 4px 2px rgb(255, 229, 195);" onclick="PopUpDetail()">Mua vé</button>}
                    </div>
                </div>
            </div>

            <!--COMMENT-->
            <div style="margin: 5px">
                @if (this.Session["UserName"] != null)
                {
                    <div style="font-size: 16px; margin: 10px 5px 2px auto; border-bottom: 1px rgb(41, 107, 76) solid">BÌNH LUẬN</div>
                    <div style="color: red; font-size: 14px; margin: 2px 0px 5px 0px">Bình luận bằng tiếng Việt có dấu, bình luận sai quy định sẽ bị xóa !</div>
                    <div style="position: relative; border: 1px rgb(112, 107, 221) solid; padding: 3px">
                        <textarea id="content" style="height: 60px; width: 100%" placeholder="Viết bình luận ..."></textarea>
                        <input type="text" name="filmId" id="filmId" value="@Model.FilmId" style="display: none"/>
                        <input type="text" name="username" id="username" value="@this.Session["UserName"].ToString().Trim()" style="display: none"/>
                        <div style="color: red; font-size: 14px; margin: 2px 0px 0px 0px">Bình luận phải dài hơn 50 kí tự.</div>
                        <input class="button small info" style="height: 30px; font-size: 17px; margin: 3px 85% ;margin:5px;display:inline;background-color: rgb(240, 83, 62);color:white;border-radius: 3px;box-shadow: 8px 4px 2px rgb(255, 229, 195);" type="button" onclick="WriteComment()" value="Bình luận" />
                    </div>
                }
                else
                {
                    <div style="font-size: 15px; margin: 10px; border-bottom: 1px rgb(41, 107, 76) solid">Xin <a href="#" id="createFlatWindow">đăng nhập</a> hoặc <a href="/Customer/Register">đăng ký</a> để bình luận</div>
                        
                }

                <div id="resultComment">
                    @Html.Partial("_Comment", comments)
                </div>
            </div>
        </div>
        <!--PHIM CUNG THE LOAI-->
        <div style="width: 28%; display: inline-block; padding-top: 30px; padding-left: 10px; vertical-align: top">
            <div style="font-size: 18px; padding-left: 30px; color: rgb(41, 107, 76); border-bottom: 1px solid #d2d2d2; border-top: 1px solid #fff;padding-bottom:14px">PHIM CÙNG THỂ LOẠI</div>
            @for (int i = 0; i < sameCateFilm.Count(); i++)
            { 
                <div style="padding: 5px; padding-left:1px; border-bottom: 1px solid #d2d2d2; border-top: 1px solid #fff;">
                    <a style="display: inline-block; border: 2px solid black; width: 30%" href="@sameCateFilm[i].FilmId">
                        <img src="~/Image/FilmImage/@sameCateFilm[i].ImageURL" style="height:100px;width:100%" />
                    </a>
                    <a style="display:inline-block;vertical-align:top;font-size:15px;cursor:pointer;font-weight:bold;width:68%" href="@sameCateFilm[i].FilmId">@sameCateFilm[i].Name
                        <div style="font-size: 13px; color: rgb(121, 121, 121); padding-left: 5px">Phim @sameCateFilm[i].Nation</div>
                        <div style="font-size: 13px; color: rgb(121, 121, 121); padding-left: 5px">@sameCateFilm[i].Format.FormatName</div>
                        <div style="font-size: 13px; color: rgb(121, 121, 121); padding-left: 5px">@sameCateFilm[i].Length phút</div>
                    </a>
                </div>
            }
        </div>
        <!--THONG TIN RAP-->
        <div style="display: none" id="bookTicket">
            <div class="overlay"></div>
            <div class="modal">
                <button onclick="closePopUp()" style="color: white; background-color: red; height: 23px; margin: 2px; border-radius: 2px; padding: 3px; line-height: 0px; position: absolute; right: 2px">Thoát</button>

                <div style="font-size: 20px; font-weight: bolder; margin-left: 10px; margin-top: 20px">Các Rạp Đang Chiếu</div>
                <div style="color: brown; font-size: 14px; margin-bottom: 5px; margin-left: 5px">Click vào giờ chiếu bạn muốn xem để tiến hành đặt vé !</div>
                <div style="width: 90%;padding:0px 0px 0px 20px; margin:10px 10px 10px 20px; border:solid 1px #ddd;background-color:rgba(223, 215, 37, 0.36)">
                    @{
                        var listOnTheater = schedule.Where(s => s.FilmId == Model.FilmId).Select(s => s.Theater.TheaterName).Distinct();
                        foreach (var theater in listOnTheater)
                        {
                            var listOnDate = schedule.Where(s => s.FilmId == Model.FilmId && s.Theater.TheaterName == @theater).Select(s => s.Date).Distinct();
                        <div style="padding-bottom: 5px; margin-bottom: 5px"></div>
                          <strong style="margin-top:5px">@theater</strong>
                            foreach (var date in listOnDate)
                            {
                       <div style="font-size: 15px;padding:5px 0px 5px 20px">@date.ToString("dd/MM/yyyy")</div>  
                                var listOnTime = schedule.Where(s => s.FilmId == Model.FilmId && s.Theater.TheaterName == @theater && s.Date == @date);
                                foreach (var item in listOnTime)
                                {
                                    var showtimeHour = item.ShowTime.Time.Hours;
                                    var showtimeDay = item.Date;
                                    if (item.ShowTime.Time.Minutes < 10)
                                    {
                                        minutes = "0" + item.ShowTime.Time.Minutes.ToString();
                                    }
                                    else if (item.ShowTime.Time.Minutes >= 10)
                                    {
                                        minutes = item.ShowTime.Time.Minutes.ToString();
                                    }

                                    if (item.ShowTime.Time.Hours < 10)
                                    {
                                        hours = "0" + item.ShowTime.Time.Hours.ToString();
                                    }
                                    else if (item.ShowTime.Time.Hours >= 10)
                                    {
                                        hours = item.ShowTime.Time.Hours.ToString();
                                    }
                                    if (showtimeDay == currentDay)
                                    {
                                        if (showtimeHour >= currentHour + (item.Theater.DeadlineForBooking / 60))
                                        {
                                            <div class="showtime">@Html.ActionLink(hours + ":" + minutes, "BookingAFilmTicket", "Schedule", new { @showtimeId = item.ShowTime.ShowTimeId, @filmId = item.FilmId, @theaterId = item.TheaterId, @roomId = item.RoomId, @scheduleId = item.ScheduleId }, new { style="color:white"}) </div>
                                        }
                                        if (showtimeHour < currentHour + (item.Theater.DeadlineForBooking / 60))
                                        {
                                            <div class="showtime_dis" data-hint-position="top" data-hint="Suất chiếu đã quá giờ">@hours:@minutes</div>
                                        }
                                    }
                                    else if (showtimeDay > currentDay)
                                    {
                                            <div class="showtime">@Html.ActionLink(hours + ":" + minutes, "BookingAFilmTicket", "Schedule", new { @showtimeId = item.ShowTime.ShowTimeId, @filmId = item.FilmId, @theaterId = item.TheaterId, @roomId = item.RoomId, @scheduleId = item.ScheduleId }, new { style="color:white"})</div>
                                    }
                                    else if (showtimeDay < currentDay)
                                    {
                                            <div class="showtime_dis"  data-hint-position="top" data-hint="Suất chiếu đã quá giờ"> @hours:@minutes</div>
                                    }
                                  
                                    if (item.Promotion != null)
                                    {
                                            <div style="display: inline; color: rgb(23, 51, 139); font-size: 14px">@item.Promotion.PromotionName</div><br />
                                    }

                                }
                        @*<div style="border-top:solid 1px #ddd;margin-top:10px;border-bottom:1px solid #fff"></div>*@

                            }
                            <div style="border-top:solid 1px #ddd;margin-top:10px;border-bottom:1px solid #fff"></div>
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function WriteComment() {
        var filmId = $('#filmId').val();
        var username = $('#username').val();
        if ($('#content').val().length > 50) {
            var content = $('#content').val();

            $.ajax({
                url: '/Home/WriteComment',
                type: 'POST',
                data: {
                    filmId: filmId,
                    username: username,
                    content: content
                },
                dataType: 'html',
                success: function (response) {
                    $('#content').val('');
                    $('#resultComment').html(response);
                }
            });
        }
        else { }
    }
    function PopUpDetail() {
        document.getElementById("bookTicket").setAttribute("style", "display:normal");
    }
    function closePopUp() { document.getElementById('bookTicket').setAttribute("style", "display:none"); }
</script>
